<template>
  <div class="project">
    <!-- 标题 -->
    <h1 class="project-title">商品ブランド</h1>
    <!-- 1. 大图 -->
    <div class="banner">
      <img :src="projectData.section1.thumbnail" alt="Main Project">
    </div>

    <!-- 2. 动态内容区域 -->
    <div class="content-area">
      <!-- 小图模式 -->
      <div class="product-grid" v-if="!showDetail">
        <div class="product" v-for="(item, index) in Object.values(projectData).slice(1)" :key="index" @click="selectProduct(index + 1)">
  <img :src="getImagePath(item.thumbnail)" :alt="item.name">
  <span class="product-name" v-html="safeReplace(item.title, /<br>/g, '\n')"></span>
</div>
      </div>
<!-- 详情模式pc -->
<div class="product-detail" v-else >
  <div class="pc-layout" v-if="!isMobile">
       <div class="left">
         <img :src="getImagePath(selectedProduct.thumbnail)" :alt="selectedProduct.name">
         <h3 style="text-align: center; font-weight: normal;">{{ selectedProduct.title.replace(/<br>/g, ' ') }}</h3>
         <p class="price" style="text-align: center;">
           <span class="price-number">{{ selectedProduct.price0 }}</span>{{ selectedProduct.price }}
         </p>
         <hr>
         <p>
           <span v-html="selectedProduct.effect.replace(/<br>/g, '\n')"></span>
         </p>
       </div>
       <div class="right">
         <h2 style="text-align: center; font-weight: normal;">
           {{ selectedProduct.subtitle }}
           <span class="subtitle">{{ selectedProduct.title0 }}</span>
         </h2>
         <hr>
         <template v-for="(content, index) in contentItems" :key="index">
           <p :class="{ 'intro-text': index === 0 }">
             <span v-html="content.replace(/<br>/g, '\n')"></span>
           </p>
           <hr v-if="index !== 0 && index !== contentItems.length - 1">
         </template>
       </div>
     </div>
    
      <!-- 详情模式移动 -->
      <div class="mobile-layout" v-else>
  <!-- 图片放在左侧 -->
  <div class="product-image">
    <img :src="getImagePath(selectedProduct.thumbnail)" :alt="selectedProduct.name">
  </div>
  
  <!-- 文字内容放在右侧 -->
  <div class="right right-content-order">
  <p class="intro-text" v-html="selectedProduct.content0.replace(/<br>/g, '\n')"></p>
  <h3 style="color: #666; font-size: 1.0em; margin-bottom: 0">{{ selectedProduct.title.replace(/<br>/g, ' ') }}</h3>
  <p class="price" style="margin-top: 0">
    <span class="price-number">{{ selectedProduct.price0 }}</span>{{ selectedProduct.price }}
  </p>
</div>
  
  <!-- 详细内容放在下方 -->
  <div class="left left-content-order">
    <hr>
    <p v-html="selectedProduct.content1.replace(/<br>/g, '\n')"></p>
    <hr>
    <p v-html="selectedProduct.effect.replace(/<br>/g, '\n')"></p>
    <hr>
    <template v-for="(content, index) in contentItems" :key="index">
      <p v-if="index >= 2" v-html="content.replace(/<br>/g, '\n')"></p>
      <hr v-if="index >= 2 && index !== contentItems.length - 1">
    </template>
  </div>
</div>

    </div>
  </div>
  </div>
</template>

<script>
import { getProjectData } from "@/api";
export default {
  name: 'ProjectPage',
  data() {
    return {
      projectData: {
        section1: {
          title: "",
          thumbnail: "",
          subtitle: "",
          content: "",
        },
        ...Object.keys(['section2']).reduce((acc, key) => {
          acc[key] = {
            title: "",
        subtitle: "",
        categoryId: null,
        categoryName: "", // 添加这个字段
        thumbnail: "",
        summary: "",
        content: "",
        price0: '',
          price: '',
          effect: '',
          title0: "",
          content0: '',
          content1: '',
          content2: '',
          content3: '',
          content4:'',
          content5:'',
          content6:'',
          };
          return acc;
        }, {})
      },
      selectedIndex: 0,
      showDetail: false, // 新增状态控制
      detailPosition: { top: '0', left: '0' }, // 初始化定位数据
      
    };
  },
  async mounted() {
    try {
      const data = await getProjectData();
      this.projectData = {
        section1: {
          ...data.rows[0],
        },
        ...Object.keys(data.rows.slice(1)).reduce((acc, key, index) => {
          const row = data.rows[index + 1];
          acc[`section${index + 2}`] = {
            ...row,
            content: (row.content || '').replace(/&lt;br&gt;/g, "<br>"),
            content0: row.content0 || ''.replace(/&lt;br&gt;/g, "<br>"),
            content1: row.content1 || ''.replace(/&lt;br&gt;/g, "<br>"),
            content2: row.content2 || ''.replace(/&lt;br&gt;/g, "<br>"),
            content3: row.content3 || ''.replace(/&lt;br&gt;/g, "<br>"),
            content4: row.content4 || ''.replace(/&lt;br&gt;/g, "<br>"),
            content5: row.content5 || ''.replace(/&lt;br&gt;/g, "<br>"),
            content6: row.content6 || ''.replace(/&lt;br&gt;/g, "<br>"),
          };
          return acc;
        }, {})
      };
    } catch (error) {
      console.error("Error fetching recruit data:", error);
    }
  },
  computed: {
    isMobile() {
      return window.innerWidth <= 768;
    },
    selectedProduct() {
        const selectedData = this.projectData[`section${this.selectedIndex + 1}`] || {
          name: '',
          thumbnail: '',
          price0: '',
          price: '',
          effect: '',
          title: '',
          title0: '',
          content0: '',
          content1: '',
          content2: '',
          content3: '',
          content4: '',
          content5: '',
          content6: ''
        };
        return selectedData;
      },
      // 新增动态内容处理
    contentItems() {
      return Object.keys(this.selectedProduct)
    .filter(key => key.startsWith('content') && key !== 'content' && key !== 'contentId')
    .sort((a, b) => parseInt(a.replace('content', '')) - parseInt(b.replace('content', '')))
    .map(key => this.selectedProduct[key]);
    
  },
    },
    methods: {
     

    safeReplace(str, pattern, replacement) {
        return str ? str.replace(pattern, replacement) : '';
      
    },
    
    
    selectProduct(index) {
      this.selectedIndex = index;
      this.showDetail = true;
    },
    goBack() {
      this.showDetail = false;
    },
    getImagePath(imgName) {
      if (!imgName) return '';
        return imgName;
      
    }
  }
}
</script>

<style scoped>
.project-title {
  text-align: center;
  font-size: 36px;
  margin: 40px 0;
  font-family: 'Hiragino Sans', 'Noto Sans JP', sans-serif; /* 添加黑体字体 */
  font-weight: 400; /* 取消加粗 */
  color: #666;
}
.content-area {
  position: relative;
  min-height: 500px;
}

.product-name {
  display: block;
  white-space: pre-line;
  margin-top: 10px;
  font-size: 24px;
  color: #666;
}
.product-image {
  width: 100%;
  margin-bottom: 20px;
}

.product-image img {
  width: 100%;
  border-radius: 10px;
}
.back-button {
  position: absolute;
  top: -40px;
  left: 10px;
  padding: 8px 15px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 20px;
  cursor: pointer;
}


.product {
  position: relative;
  transition: transform 0.3s;
}

.product:hover {
  transform: scale(1.03);
  z-index: 100;
}



/* 页面整体 */
.project {
  padding: 1px;
  text-align: center;
  background: linear-gradient(135deg, 
    #fff 10%, 
    #fff9f0 40%, 
    #fff0f5 50%, 
    #fff 100%);
}

/* 顶部大图 */
.banner {
  width: 100%;
  overflow: hidden;
  height: 200px;
  position: relative; /* 新增定位上下文 */
}

.banner img {
  width: 100%;
  height: 100%;
  object-fit: cover; 
  object-position: center 75%; /* 聚焦图片上部重要内容区域 */
  border-radius: 10px;
}
.pc-layout {
  display: flex;
  justify-content: space-between;
  align-items: start;
  max-width: 1100px;
  margin: 40px auto;
  text-align: left;
  padding: 20px;
}

.pc-layout .left,
.pc-layout .right {
  width: 47%;
}

.pc-layout .left img {
  width: 100%;
  border-radius: 10px;
}

/* 移动端专属样式 */
.mobile-layout {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 15px;
}

.mobile-layout .product-image {
  width: 40%;
  order: 0;
}

.mobile-layout .right-content-order {
  width: 55%;
  order: 1;
}

.mobile-layout .left-content-order {
  width: 100%;
  order: 2;
  margin-top: 20px;
}
@media (min-width: 768px) {
  .banner {
    height: 400px; /* 桌面端增加显示高度 */
  }
}

/* 小图片网格 */
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 从3列改为2列 */
  gap: 15px;
  max-width: 1400px;
  margin: 30px auto;
}

.product {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}



.product img {
  width: 100%;
  height: auto;
  cursor: pointer;
  border-radius: 10px;
  transition: 0.3s;
}

.product img:hover {
  transform: scale(1.05);
}

/* 详情展示 */
.product-detail {
  display: flex;
  justify-content: space-between;
  align-items: start;
  max-width: 1100px;
  margin: 40px auto;
  text-align: left;
  /* 已删除 background 属性 */
  padding: 20px; 
}

.left, .right {
  width: 47%;
}

.left img {
  width: 100%;
  border-radius: 10px;
}

.price {
  font-size: 20px;
  color: red !important;
  font-weight: bold;
}

hr {
  margin: 10px 0;
  border: none;
  border-top: 1px solid #ddd;
}
.product p {
  color: #666; /* 添加灰色字体 */
  margin: 10px 0;
}
.product-detail p {
  color: #666;
  margin: 10px 0;
}


/* 调整样式定义顺序 */
.product-detail p {
  color: #666;
  margin: 10px 0;
  font-size: 14px;
}

.product-detail .intro-text {
  font-size: 1.1em;
  
}

/* 新增换行样式 */
.product-detail p span {
  white-space: pre-line;
}

/* 在现有样式中添加 */
h2 .subtitle {
  font-size: 0.8em;
  display: inline;  
  margin-left: 8px; 
  color: #666;
  /* 移除 margin-top */
}
.price-number {
  font-size: 24px;
  color: red;
  font-weight: bold;
}

@media (max-width: 768px) {
  .project-title {
    display: none; /* 移动端隐藏标题 */
  }
  
  .banner {
    margin-top: 0; /* 移除顶部间距，使内容上移 */
  }

  .product-name {
    font-size: 12px; /* 移动端字体缩小 */
  }

  .left, .right {
    width: 100%;
  }
  
  .right {
    order: -1; /* 将右侧内容移到上方 */
    margin-bottom: 20px;
  }
  
  .right h2 {
    font-size: 18px;
    margin-bottom: 10px;
  }
  
  .right .intro-text {
    font-size: 14px;
    margin-bottom: 15px;
  }
  
  .left h3 {
    font-size: 16px;
    margin: 10px 0;
  }
  
  
}
  @media (max-width: 768px) {
    .product-detail {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 15px;
  }

  .product-image {
    width: 40%;
    order: 0; /* 图片在左侧 */
  }

  .right-content-order {
    width: 55%;
    order: 1; /* 文字在右侧 */
  }

  .left-content-order {
    width: 100%;
    order: 2; /* 详细内容在下方 */
    margin-top: 20px;
  }

  .mobile-layout .left-content-order {
  margin-top: -40px;
}

.product-image img {
  height: 90%;
}
}


</style>


